<template>
  <v-group
    className="SolidLine"
    :config="config"
    @transformend="handleTransformEnd"
    @dragend="handleDragEnd"
  >
    <v-line
      :config="{
        points: convert2arr(circles),
        stroke: config.color,
        strokeWidth: config.strokeWidth,
        lineCap: 'round',
        lineJoin: 'round',
      }"
    ></v-line>

    <v-circle
      :key="circle.id"
      v-for="circle in circles"
      @dragend="onDragCircleEnd"
      @dragmove="onDragCircleMove"
      @click="onClickCircle"
      :config="{
        visible: config.trans,
        id: circle.id,
        x: circle.x,
        y: circle.y,
        radius: config.strokeWidth / 2 + 5,
        stroke: 'black',
        strokeWidth: 2,
        draggable: true,
      }"
    >
    </v-circle>

    <v-circle
      @dragend="onDragVTCircleEnd"
      :key="vtcircle.id"
      v-for="vtcircle in vtcircles"
      :config="{
        visible: config.trans,
        id: vtcircle.id,
        x: vtcircle.x,
        y: vtcircle.y,
        radius: config.strokeWidth / 2 + 5,
        stroke: 'grey',
        strokeWidth: 2,
        draggable: true,
      }"
    >
    </v-circle>

    <!-- <v-text
      :config="{
        text: config.x,
        fontFamily: 'Calibri',
        fontSize: 18,
        padding: 5,
        fill: 'black',
      }"
    /> -->
  </v-group>
</template>
<script>
import { UUID } from '@/utils/index';
//import _ from 'lodash'


export default {
  name: "XSolidLine",
  props: {
    config: {
      type: Object,
    },
  },
  mounted () {
    // window.setInterval(() => {
    //   if (
    //     this.dashOffset <=
    //     -(this.config.strokeWidth + this.config.strokeWidth * 2)
    //   ) {
    //     this.dashOffset = 0;
    //   }
    //   this.dashOffset = this.dashOffset - 1;
    // }, 50);
  },
  data () {
    const circles = this.convert2obj(this.config.points);
    const vtcircles = this.syncCircles(circles);
    return {
      dashOffset: 0,
      circles: circles,
      vtcircles: vtcircles,
    };
  },
  methods: {
    // eslint-disable-next-line no-unused-vars
    syncCircles (circles) {
      let result = [];
      for (let i = 0; i < circles.length; i++) {
        //0,1,2
        if (i >= 1) {
          result.push({
            id: UUID(),
            x: (circles[i].x - circles[i - 1].x) / 2 + circles[i - 1].x,
            y: (circles[i].y - circles[i - 1].y) / 2 + circles[i - 1].y,
          })
        }
      }
      return result;
    },
    convert2arr (objs) {
      let result = [];
      for (let obj of objs) {
        result.push(obj.x)
        result.push(obj.y)
      }
      return result;
    },
    convert2obj (arr) {
      let result = [];
      let tmp = {};
      for (let i = 0; i < arr.length; i++) {
        console.log(arr[i], 'arr[i]')
        //0,2,4,6,8
        if (i % 2 === 0) {
          tmp.x = arr[i];
        } else {
          //1,3,5,7,9
          tmp.y = arr[i];
          // //这里加入中间点(间隔点图形学算法)
          // if (i > 1) {
          //   const last = _.findLast(result, (e) => e.ptype === 'real')
          //   result.push({
          //     id: UUID(),
          //     ptype: 'virtual',
          //     x: (tmp.x - last.x) / 2 + last.x,
          //     y: (tmp.y - last.y) / 2 + last.y
          //   });
          // }
          //添加进数组
          result.push({ id: UUID(), ...tmp });
        }
      }
      //console.log(JSON.stringify(result), 'result');
      return result;
    },

    // eslint-disable-next-line no-unused-vars
    handleTransformEnd (...p) {
      this.$emit("transformend", ...p);
    },
    // eslint-disable-next-line no-unused-vars
    handleDragEnd (...p) {
      console.log('调用了这个drag')
      this.$emit("dragend", ...p);
    },
    //拖拽移动时
    onDragCircleMove (e) {
      const p = this.circles.find(p => p.id === e.target.attrs.id)
      p.x = e.target.x();
      p.y = e.target.y();
      this.vtcircles = this.syncCircles(this.circles)
    },
    //结束拖拽
    onDragCircleEnd (e) {
      const p = this.circles.find(p => p.id === e.target.attrs.id)
      p.x = e.target.x();
      p.y = e.target.y();
      this.vtcircles = this.syncCircles(this.circles)


      //此处需要同步到设计器父组件
      this.$emit('events', 'changepoints', this.config.id, this.convert2arr(this.circles));
      //阻止冒泡
      e.cancelBubble = true;

    },
    //拖拽虚拟节点
    onDragVTCircleEnd (e) {

      const vIndex = this.vtcircles.findIndex(p => p.id === e.target.attrs.id);
      //insert after(在后面添加)
      this.circles.splice(vIndex + 1, 0, {
        id: UUID(),
        x: e.target.x(),
        y: e.target.y()
      });
      //再次同步圆
      this.vtcircles = this.syncCircles(this.circles)

      //此处需要同步到设计器父组件
      this.$emit('events', 'changepoints', this.config.id, this.convert2arr(this.circles));
      //阻止冒泡
      e.cancelBubble = true;

    },
    onClickCircle (e) {
      const index = this.circles.findIndex(p => p.id === e.target.attrs.id);
      this.$emit('events', 'selectanchor', index * 2);//映射到points数组上的锚点index
    },
  },
  //监听更新
  watch: {
    'config.points' (points) {
      const circles = this.convert2obj(points);
      const vtcircles = this.syncCircles(circles);
      this.circles = circles;
      this.vtcircles = vtcircles;
    }
  }
};
</script>
